/*
 * 新闻详情
 * @Author: ljb
 * @Date: 2018-11-21 11:43:19
 * @Last Modified by: ljb
 * @Last Modified time: 2019-10-11 15:59:02
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

	@import '~src/assets/css/common.less';

	@deep : ~'>>>';

	.v-article-detail {
		.header{
			position: fixed;
			width: 100%;
			z-index: 999;
		}
		background-color: #F9F9F9;
		padding-bottom: 24*@rem-per-px;
		.article-container {
			padding: 136*@rem-per-px 40*@rem-per-px 30*@rem-per-px;
			color: #232931;
			.article-title {
				font-size: 32*@rem-per-px;
				font-weight: bold;
				line-height: 45*@rem-per-px;
			}
			.article-date {
				line-height: 28*@rem-per-px;
				margin-top: 6*@rem-per-px;
				margin-bottom: 28*@rem-per-px;
				color: #BBBDC0;
				font-size: 20*@rem-per-px;
			}
			.article-image {
				// @see https://panxsoft.coding.net/p/Direwolf/task/227047
				@cover-width: (750 - (40*2))*@rem-per-px;
				width: @cover-width;
				height: @cover-width*(22/33);
				margin: 0 auto;
				margin-bottom: 37*@rem-per-px;
				overflow: hidden;
				font-size: 0;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.article-content {
				max-width: 100%;
				color: rgba(35, 41, 49, .8);
				line-height: 2;
				@{deep} img {
					max-width: 100% !important;
				}
			}
			.article-read {
				width: 100%;
				height: 28*@rem-per-px;
				margin-top: 28*@rem-per-px;
				font-size: 20*@rem-per-px;
				font-weight: 500;
				line-height: 28*@rem-per-px;
				color: rgba(15, 15, 15, .45);
			}
		}
	}

</style>
<template>
	<div class="v-article-detail">
		<div class="header">
			<page-header
				:title="$t('routers.article_detail')"
				@back="backToHome"/>
		</div>
		<div class="article-container white-bg">
			<div
				class="article-title"
				v-text="articleContent.title"/>
			<div
				class="article-date"
				v-text="article_detail.date_added"/>
			<div class="article-image">
				<img
					v-lazy="article_detail.image"
					v-if="article_detail.image"
					alt="">
			</div>
			<div
				class="article-content"
				v-html="articleContent.description"/>
			<div
				class="article-read">
				{{ $t('article.read') + $t('common.colon') + articleReads }}
			</div>
		</div>
		<recommendModule :products="recommend_products"/>
	</div>
</template>

<script>

import qs from 'qs';
import { mapMutations } from 'vuex';
import { ARTICLE_DETAIL } from 'src/API_LIST';
import recommendModule from 'src/views/module/detail-recommend-module';
import header from 'src/views/component/header';
import { appHandle } from 'src/views/mixins/appHandle';

/**
 * 新闻详情
 * @vue-data {Object} [article_detail={}] - 新闻详情
 * @vue-data {array} [recommend_products=[]] - 推荐商品数组
 * @vue-computed {Object} articleContent - 文章详细内容
 * @vue-computed {number} articleReads - 文章阅读数
 */
export default {
	name: 'ArticleDetail',
	components: {
		recommendModule,
		'page-header': header,
	},
	mixins: [appHandle],
	data() {
		return {
			article_detail: {},	// 新闻详情
			recommend_products: [],	// 推荐商品
		};
	},
	computed: {
		// 简化文章内容的获取
		articleContent() {
			return this.article_detail.filter_press_description_by_language || {};
		},
		articleReads() {
			return this.article_detail ? this.article_detail.hits : 0;
		},
	},
	mounted() {
		const article_id = this.getArticleId();
		this.fetchArticleDetailAndProduct(article_id);
		const { theme } = this.$route.query;
		this.setThemeName(theme);
	},
	methods: {

		...mapMutations(['setThemeName']),

		/**
         * 处理返回事件
         */
		backToHome() {
			this.handleApp('back');
		},

		/**
		 * 获取当前查看的新闻的详情id
		 * @return {String} {新闻的详情id}
		 */
		getArticleId() {
			const { article_id } = this.$route.query;
			return article_id || '';
		},
		/**
		 * 获取推荐商品列表
		 * @return {Promise} {请求推荐商品的promise}
		 */
		fetchArticleDetailAndProduct(id) {
			const param = {
				language: this.$url.language || this.$url.lang,
				store_id: this.$url.store_id,
				currency: this.$url.currency,
			};

			const query_str = qs.stringify(param);

			return this.$http.get(`${ARTICLE_DETAIL}/${id}?${query_str}`)
				.then(({ data }) => {
					if (data.code !== 0) throw new Error(data.error);

					this.article_detail = data.press;

					this.recommend_products = data.recommend_products;
				})
				.catch((err) => {
					const toast = this.$createToast({
						type: 'error',
						time: 2000,
						txt: err.message,
					});
					toast.show();
				});
		},
	},
};
</script>
